<template>
  <el-form
    ref="refFormRefs"
    :class="['ls-form', { 'is-inline': inline }]"
    :inline="inline"
    :label-width="labelWidth"
    :model="model"
    v-bind="$attrs"
  >
    <!-- $attrs  props 没有接收的属性 -->
    <template v-for="(item, index) in config">
      <!-- 插槽 -->
      <slot v-if="item.type === 'itemSlot'" :name="item.slotName" v-bind="item"></slot>
      <!-- 二级头部 -->
      <div v-else-if="item.type === 'header'" :key="index" class="segment-title">
        {{ item.label }}
      </div>
      <!-- 隐藏 -->
      <span
        v-else-if="item.hide || item.hidden"
        :key="index + 1"
        :style="{
          'grid-column-start': 'span 24',
          'grid-column': 'span ' + (item.span || 24),
          'grid-row': 'span ' + (item.row || 1),
          display: item.hidden ? 'none' : ''
        }"
      ></span>
      <!-- 普通的 -->
      <layout
        v-else
        :key="index + 2"
        class="ls-form-item"
        :style="{
          'grid-column-start': 'span 24',
          'grid-column': 'span ' + (item.span || 24),
          'grid-row': 'span ' + (item.row || 1)
        }"
        :item="item"
        :model="model"
        :global="$attrs"
        @mapAnewValidate="anewValidate"
      >
        <!-- 地图走校验anewValidate -->
        <slot :name="item.slotName" v-bind="{ value: model[item.prop], row: item }"></slot>
      </layout>
    </template>
  </el-form>
</template>
<script>
export default {
  name: 'RfComplexForm'
}
</script>
<script setup>
import layout from './layout.vue'
import { ref } from 'vue'
let emit = defineEmits(['update:config', 'update:model'])
const props = defineProps({
  model: Object,
  config: Array,
  inline: Boolean,
  labelWidth: {
    type: String,
    default: 'auto'
  }
})
const refFormRefs = ref(null)
const anewValidate = (prop) => {
  refFormRefs.value.validateField(prop)
}
const validate = (callback) => {
  refFormRefs.value.validate(callback)
}
const resetFields = () => {
  refFormRefs.value.resetFields()
}
const clearValidate = (props) => {
  refFormRefs.value.clearValidate(props)
}
const setFormConfig = (config, data, prop, attr = 'options') => {
  config.find((item) => item.prop === prop)[attr] = data
  emit('update:config', config)
}
const setFormModel = (formData, data, prop) => {
  formData[prop] = data
  emit('update:model', formData)
}
defineExpose({
  anewValidate,
  validate,
  resetFields,
  clearValidate,
  setFormConfig,
  setFormModel
})
</script>

<style lang="scss" scoped></style>
